<template>
	<div class="download">
		<Layout>
			<Header class="header">
				<span class="title"> 更新升级 </span>
				<div class="close" @click="closeHandle">
					<GuanBi width="1.13rem" height="1.13rem" />
				</div>
			</Header>
			<Layout class="main">
				<div class="logo">
					<Logo width="5.25rem" height="4.38rem"></Logo>
					<span class="title">鸡小蟹</span>
				</div>
				<div class="progress-info">
					<Progress :percent="percent" :stroke-width="20" status="active" text-inside />
					<span>正在下载...</span>
				</div>
				<div class="progress-button action">
					<Button class="btn-default" type="default" @click="closeHandle">取消更新</Button>
				</div>
			</Layout>
		</Layout>
		<DownloadComplete v-model="isShow"></DownloadComplete>
	</div>
</template>
<script>
import Logo from '@/components/svg/logo.vue'
import DownloadComplete from './download-complete.vue'
import GuanBi from '@/components/svg/guanbi.vue'
export default {
	components: { DownloadComplete, Logo, GuanBi },
	data() {
		return {
			percent: 0,
			isShow: false
		}
	},
	methods: {
		closeHandle() {
			chrome.webview.hostObjects.form.OnPageEvent('cancel')
		},
		setCount(count) {
			this.percent = parseInt(count)
			if (this.percent === 100) {
				this.isShow = true
			}
		}
	},
	mounted() {
		window.setCount = this.setCount
	}
}
</script>
<style lang="less" scoped>
.download {
	.header {
		background: var(--setting-header-bg-color);
		display: flex;
		justify-content: space-between;
		padding: 0 1.87rem;
		// border-bottom: 1px solid #ddd;
		app-region: drag;
		height: 3.5rem;
		line-height: 3.5rem;
		.title {
			font-family: PingFangSC-Medium;
			letter-spacing: 0;
			font-size: 1.13rem;
			color: var(--ivu-label-text-color);
			font-weight: 600;
		}
		.close {
			cursor: pointer;
			font-size: 1.13rem;
			app-region: no-drag;
			/deep/.fill-color {
				fill: var(--header-close-color);
			}
		}
	}
	.main {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--main-bg-color);
		height: calc(100vh - 3.5rem);
		padding: 20px 20px;
		.logo {
			display: flex;
			flex-direction: column;
			align-items: center;
			/deep/.fill-color {
				fill: var(--bg-color);
			}
			/deep/.fill-color2 {
				fill: var(--svg-logo-color);
			}
			.title {
				font-family: PingFangSC-Semibold;
				font-size: 1.25rem;
				color: var(--setting-text-title-color);
				letter-spacing: 0;
				font-weight: 600;
				margin-top: 0.6rem;
				margin-bottom: 3.5rem;
			}
		}
		.progress-info {
			display: contents;
			span {
				font-family: PingFangSC-Regular;
				font-size: 1.13rem;
				color: #17191d;
				letter-spacing: 0;
				font-weight: 400;
				margin-top: 1rem;
			}
		}
		.progress-button {
			margin-top: 2.5rem;
			display: flex;
			justify-content: center;
		}
	}

	.action button {
		background: var(--ivu-btn-default-bg, #c6c6c6);
		border-radius: 1.75rem;
		padding: 0.5rem 2.05rem 0.5rem 2.05rem;
		height: 3rem;
		border: var(--ivu-btn-default-border, 1px solid #c6c6c6);
	}
	.action /deep/.ivu-btn-default span {
		font-family: PingFangSC-Semibold;
		font-size: 1.13rem;
		color: var(--ivu-btn-default-color, #fff);
		letter-spacing: 0;
		line-height: 2rem;
		font-weight: 600;
	}
	.action /deep/.ivu-btn:hover {
		border: 1px solid transparent;
	}
}
</style>
